<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约创建与修改页设计</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            color: #333;
        }
        .container {
            max-width: 414px;
            margin: 20px auto;
            background: white;
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
        }
        .back-button {
            font-size: 18px;
            margin-right: 10px;
        }
        .header-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
        }
        .header-action {
            font-size: 14px;
            color: #333;
        }
        .content {
            padding: 15px;
            padding-bottom: 70px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            display: block;
        }
        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        .form-textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
            min-height: 100px;
            resize: vertical;
        }
        .form-select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
            background-color: white;
        }
        .form-hint {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        .form-error {
            font-size: 12px;
            color: #f44336;
            margin-top: 5px;
        }
        .upload-box {
            border: 1px dashed #ddd;
            border-radius: 4px;
            padding: 20px;
            text-align: center;
            background: #f9f9f9;
            cursor: pointer;
        }
        .upload-icon {
            font-size: 24px;
            color: #999;
            margin-bottom: 10px;
        }
        .upload-text {
            font-size: 14px;
            color: #666;
        }
        .upload-hint {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        .preview-image {
            width: 100%;
            height: 150px;
            background: #f0f0f0;
            border-radius: 4px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .preview-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 24px;
            height: 24px;
            background: rgba(0,0,0,0.5);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        .date-inputs {
            display: flex;
            gap: 10px;
        }
        .date-input {
            flex: 1;
        }
        .section-title {
            font-size: 16px;
            font-weight: 500;
            margin: 25px 0 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f0f0f0;
        }
        .checkbox-group {
            margin-bottom: 15px;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .checkbox-input {
            margin-right: 10px;
        }
        .checkbox-label {
            font-size: 14px;
        }
        .radio-group {
            margin-bottom: 15px;
        }
        .radio-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .radio-input {
            margin-right: 10px;
        }
        .radio-label {
            font-size: 14px;
        }
        .time-slots {
            margin-top: 10px;
        }
        .time-slot-date {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
            padding-bottom: 5px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .date-action {
            font-size: 12px;
            color: #666;
            display: flex;
            align-items: center;
        }
        .date-action-icon {
            margin-right: 3px;
        }
        .time-slot-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        .time-slot {
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            background: #f5f5f5;
            color: #666;
            position: relative;
        }
        .time-slot-remove {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 16px;
            height: 16px;
            background: #f44336;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }
        .time-slot-add {
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            background: white;
            color: #666;
            border: 1px dashed #ddd;
            display: flex;
            align-items: center;
        }
        .time-slot-add-icon {
            margin-right: 5px;
        }
        .tag-input-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
        }
        .tag {
            display: flex;
            align-items: center;
            background: #f5f5f5;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 14px;
        }
        .tag-text {
            margin-right: 5px;
        }
        .tag-remove {
            font-size: 12px;
            color: #999;
        }
        .tag-input {
            flex: 1;
            min-width: 100px;
            border: none;
            outline: none;
            font-size: 14px;
            padding: 4px 0;
        }
        .bottom-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            max-width: 414px;
            height: 60px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            box-sizing: border-box;
            border-top: 1px solid #f0f0f0;
        }
        .cancel-button {
            padding: 10px 20px;
            font-size: 14px;
            color: #666;
            background: #f0f0f0;
            border-radius: 4px;
            border: none;
        }
        .save-button {
            padding: 10px 20px;
            font-size: 14px;
            color: white;
            background: #333;
            border-radius: 4px;
            border: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="back-button">←</div>
            <div class="header-title">创建预约项目</div>
            <div class="header-action">预览</div>
        </div>
        
        <div class="content">
            <div class="form-group">
                <label class="form-label">预约项目名称</label>
                <input type="text" class="form-input" placeholder="请输入预约项目名称">
                <div class="form-hint">简洁明了的名称更容易被用户理解</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">预约类型</label>
                <select class="form-select">
                    <option>请选择预约类型</option>
                    <option>会议室</option>
                    <option>场地</option>
                    <option>设备</option>
                    <option>服务</option>
                    <option>其他</option>
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label">封面图片</label>
                <div class="upload-box">
                    <div class="upload-icon">📷</div>
                    <div class="upload-text">点击上传封面图片</div>
                    <div class="upload-hint">建议尺寸：750×400px，JPG/PNG格式</div>
                </div>
                <div class="preview-image">
                    <div style="color: #999; font-size: 14px;">预览图片</div>
                    <div class="preview-remove">×</div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">项目描述</label>
                <textarea class="form-textarea" placeholder="请输入项目描述"></textarea>
                <div class="form-hint">详细描述预约项目的内容、用途和注意事项</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">预约地点</label>
                <input type="text" class="form-input" placeholder="请输入预约地点">
            </div>
            
            <div class="form-group">
                <label class="form-label">容纳人数</label>
                <input type="number" class="form-input" placeholder="请输入容纳人数">
                <div class="form-hint">如不适用可留空</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">管理部门</label>
                <input type="text" class="form-input" placeholder="请输入管理部门">
            </div>
            
            <div class="form-group">
                <label class="form-label">联系方式</label>
                <input type="text" class="form-input" placeholder="请输入联系方式">
            </div>
            
            <div class="section-title">可预约时间设置</div>
            
            <div class="form-group">
                <label class="form-label">预约有效期</label>
                <div class="date-inputs">
                    <div class="date-input">
                        <input type="text" class="form-input" placeholder="开始日期">
                    </div>
                    <div class="date-input">
                        <input type="text" class="form-input" placeholder="结束日期">
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">可预约时段</label>
                <div class="time-slots">
                    <div class="time-slot-date">
                        <div>2023年11月23日（周四）</div>
                        <div class="date-action">
                            <span class="date-action-icon">+</span>
                            添加时段
                        </div>
                    </div>
                    <div class="time-slot-list">
                        <div class="time-slot">
                            09:00-10:00
                            <div class="time-slot-remove">×</div>
                        </div>
                        <div class="time-slot">
                            10:00-11:00
                            <div class="time-slot-remove">×</div>
                        </div>
                        <div class="time-slot">
                            11:00-12:00
                            <div class="time-slot-remove">×</div>
                        </div>
                        <div class="time-slot">
                            13:00-14:00
                            <div class="time-slot-remove">×</div>
                        </div>
                        <div class="time-slot-add">
                            <span class="time-slot-add-icon">+</span>
                            添加
                        </div>
                    </div>
                    
                    <div class="time-slot-date">
                        <div>2023年11月24日（周五）</div>
                        <div class="date-action">
                            <span class="date-action-icon">+</span>
                            添加时段
                        </div>
                    </div>
                    <div class="time-slot-list">
                        <div class="time-slot">
                            09:00-10:00
                            <div class="time-slot-remove">×</div>
                        </div>
                        <div class="time-slot">
                            10:00-11:00
                            <div class="time-slot-remove">×</div>
                        </div>
                        <div class="time-slot-add">
                            <span class="time-slot-add-icon">+</span>
                            添加
                        </div>
                    </div>
                    
                    <div class="date-action" style="margin-top: 10px;">
                        <span class="date-action-icon">+</span>
                        添加日期
                    </div>
                </div>
            </div>
            
            <div class="section-title">预约设置</div>
            
            <div class="form-group">
                <label class="form-label">每时段最大预约人数</label>
                <input type="number" class="form-input" placeholder="请输入人数" value="30">
                <div class="form-hint">设置为0表示不限制</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">每人最多可预约次数</label>
                <input type="number" class="form-input" placeholder="请输入次数" value="1">
                <div class="form-hint">设置为0表示不限制</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">是否需要审核</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="review-yes" name="review" class="radio-input" checked>
                        <label for="review-yes" class="radio-label">需要审核</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="review-no" name="review" class="radio-input">
                        <label for="review-no" class="radio-label">无需审核（自动通过）</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">预约验证方式</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="verify-wechat" class="checkbox-input" checked>
                        <label for="verify-wechat" class="checkbox-label">微信授权</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="verify-phone" class="checkbox-input">
                        <label for="verify-phone" class="checkbox-label">手机号验证</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="verify-code" class="checkbox-input">
                        <label for="verify-code" class="checkbox-label">验证码</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">标签</label>
                <div class="tag-input-container">
                    <div class="tag">
                        <span class="tag-text">投影仪</span>
                        <span class="tag-remove">×</span>
                    </div>
                    <div class="tag">
                        <span class="tag-text">白板</span>
                        <span class="tag-remove">×</span>
                    </div>
                    <div class="tag">
                        <span class="tag-text">音响系统</span>
                        <span class="tag-remove">×</span>
                    </div>
                    <input type="text" class="tag-input" placeholder="添加标签...">
                </div>
                <div class="form-hint">添加标签以便用户快速了解特点</div>
            </div>
            
            <div class="section-title">高级设置</div>
            
            <div class="form-group">
                <label class="form-label">预约须知</label>
                <textarea class="form-textarea" placeholder="请输入预约须知">1. 请至少提前24小时预约
2. 如需取消预约，请提前4小时通知
3. 使用完毕后请将场地恢复原状
4. 禁止在场地内吸烟、用餐
5. 如有设备损坏，请及时报告</textarea>
            </div>
            
            <div class="form-group">
                <label class="form-label">预约表单设置</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="form-name" class="checkbox-input" checked>
                        <label for="form-name" class="checkbox-label">姓名（必填）</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="form-phone" class="checkbox-input" checked>
                        <label for="form-phone" class="checkbox-label">电话（必填）</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="form-department" class="checkbox-input" checked>
                        <label for="form-department" class="checkbox-label">部门（必填）</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="form-people" class="checkbox-input" checked>
                        <label for="form-people" class="checkbox-label">参与人数（必填）</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="form-purpose" class="checkbox-input" checked>
                        <label for="form-purpose" class="checkbox-label">用途说明（选填）</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="form-equipment" class="checkbox-input">
                        <label for="form-equipment" class="checkbox-label">设备需求（选填）</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">状态</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="status-active" name="status" class="radio-input" checked>
                        <label for="status-active" class="radio-label">启用</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="status-inactive" name="status" class="radio-input">
                        <label for="status-inactive" class="radio-label">禁用</label>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bottom-bar">
            <button class="cancel-button">取消</button>
            <button class="save-button">保存</button>
        </div>
    </div>
</body>
</html>